<template>
    <div class="species-observation">
        <CardBox title="物种观测记录"></CardBox>
        <div class="content-container">
            <div class="content-item">
                <div class="content-item-left">
                    物种识别
                </div>
                <div class="content-item-right">
                    <div class="tab-header">
                        <div class="tab-item" 
                             v-for="(item, index) in speciestabs" 
                             :key="index"
                             :class="{ active: currentTab.value === item.value }"
                             @click="handleTabClick(item)">
                            {{ item.label }}
                        </div>
                    </div>
                    <div class="chart-container" style="height: 160px;">
                        <div class="species-chart" ref="speciesChart"></div>
                    </div>
                </div>
            </div>
            <div class="content-item">
                <div class="content-item-left">
                    观测记录
                </div>
                <div class="content-item-right">
                    <div class="table-container">
                        <el-table
                            :data="tableData"
                            :height="215"
                            stripe
                            @row-click="handleRowClick"
                            style="width: 98%">
                        <el-table-column
                        prop="localName"
                        label="设备类型"
                        width="150"
                        show-overflow-tooltip>
                        <template #default="scope">
                            <span class="ellipsis">{{ scope.row.localName }}</span>
                        </template>
                        </el-table-column>
                        <el-table-column
                        prop="spName"
                        class="ellipsis"
                        label="识别物种"
                        width="100">
                        </el-table-column>
                        <el-table-column
                        prop="fileTime"
                        label="时间">
                        </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            <div class="content-item">
                <div class="content-item-left">
                    观测视频
                </div>
                <Detail></Detail>
            </div>
        </div>
    </div>
</template>

<script>
import CardBox from '@/components/Global/CardBox.vue'
import Detail from '@/components/PermanentPlot/SpeciesObservationDetail.vue'
import * as echarts from 'echarts'
import {EventBus} from "../../utils/event-bus";

export default {
    components: {
        CardBox,
        Detail
    },
    data() {
        return {
            currentTab: { label: '红外', value: 'hongwai' },
            deviceIds:[],
            speciestabs: [
                { label: '红外', value: 'hongwai' },
                { label: '声纹', value: 'shengwen' },
                { label: '视频', value: 'shipin' },
                { label: '虫情', value: 'chongqing' }
            ],
            chartData:[],
            tableData: [
                {
                    localName: '红外',
                    spName: '狐狸',
                    fileTime: '2021-01-01'
                },
                {
                    localName: '红外',
                    spName: '狐狸',
                    fileTime: '2021-01-01'
                },
                {
                    localName: '红外',
                    spName: '狐狸',
                    fileTime: '2021-01-01'
                },
                {
                    localName: '红外',
                    spName: '狐狸',
                    fileTime: '2021-01-01'
                },
                {
                    localName: '红外',
                    spName: '狐狸',
                    fileTime: '2021-01-01'
                },
                {
                    localName: '红外',
                    spName: '狐狸',
                    fileTime: '2021-01-01'
                },
                
            ],
            chart: null
        }
    },
    mounted() {
        this.initChart()
    },
    created() {
        EventBus.$on('sent-device-id-to-right', (message) => {
            this.sample=message;
            this.getItemList(message.id);

        });
    },
    methods: {
        getItemList(samplePlotId){
            this.$api.sample.getItemList(samplePlotId,this.currentTab.label).then(res => {
                var ids=[];
                if(res&&res.length>0){
                    for (let i = 0; i < res.length; i++) {
                        ids.push(res[i].value);
                    }
                    this.getResult(ids);
                }
            });
        },
        handleTabClick(tab) {
            this.currentTab = tab
            this.getItemList(this.sample.id);
        },
        getResult(ids){
            this.$api.species.getStaticByDateAndIds(this.currentTab.value,'2021-01-01','2050-01-01',ids).then(res => {
                this.chartData = res;
                this.updateChartData();
            });
            this.$api.species.getCollectListByIds(this.currentTab.value,ids).then(res => {
                this.tableData = res;
                if(res&&res.length>0){
                    EventBus.$emit('sent-record', res[0]);
                }
            });
        },
        handleRowClick(row, column, cell, event) {
            EventBus.$emit('sent-record', row);
        },
        initChart() {
            this.chart = echarts.init(this.$refs.speciesChart)
        },
        updateChartData() {
            var xData=[];
            var yData=[];
            if(this.chartData){
                this.chartData.forEach(function(element) {
                    xData.push(element.name);
                    yData.push(element.value);
                });
            }
            const option = {
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '8%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(0,24,106,0.8)',
                    borderColor: 'rgba(0,150,255,0.3)',
                    textStyle: {
                        color: '#fff'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xData,
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(7, 255, 229, 0.3)'
                        }
                    },
                    axisLabel: {
                        color: '#fff'
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(7, 255, 229, 0.1)'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(7, 255, 229, 0.3)'
                        }
                    },
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [{
                    data: yData,
                    type: 'bar',
                    barWidth: '30%',
                    itemStyle: {
                        color: '#07FFE5'
                    }
                }]
            }
            this.chart && this.chart.setOption(option)
        }
    },
    beforeDestroy() {
        this.chart && this.chart.dispose()
    }
}
</script>

<style lang="scss" scoped>
.content-container {
    padding: 10px;
}

.content-item {
    display: flex;
    padding-top: 10px;
    width: 100%;
    .content-item-left {
        width: 30px;
        color: #fff;
        background: url('@/assets/img/species-observetion-tab-bg.png') no-repeat;
        background-size: 36px 119px;
        font-size: 16px;
        text-align: center;
    }
    
    .content-item-right {
        flex: 1;
        padding-left: 10px;
        .tab-header {
            height: 20px;
            line-height: 20px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            .tab-item {
                color: #fff;
                cursor: pointer;
                font-size: 12px;
                margin-right: 10px;
                padding: 0 10px;
                &:last-child {
                    margin-right: 0;
                }
                &.active {
                    color: #07FFE5;
                    background: url('@/assets/img/nav-item-bg.png') no-repeat;
                    background-size: 46px 20px;
                }
            }
        }
        .species-chart {
                width: 100%;
                height: 100%;
            }
    }
}
.table-container{
    // height: 257px;
    // width: 100%;
    // padding-left: 10px;
}
:deep(.el-table) {
    background: transparent;
    font-size: 14px;
    
    &::before {
      display: none;
    }
    
    tr {
      background: transparent;
      height: 28px;
    }

    .el-table__body {
      tr {
        &.el-table__row--striped td {
          background: rgba(65, 123, 214, 0.19);
        }
        &:hover{
          td {
            color: #07FFE5 !important;
            background: rgba(65, 123, 214, 0.19) !important;
          }
        }
      }
    }
    
    th.el-table__cell {
      background: rgba(65, 123, 214, 0.19) !important;
      border-bottom: 1px solid rgba(0, 150, 255, 0.3);
      color: #fff !important;
      font-weight: 500;
      padding: 4px 10px;
      height: 28px;
      line-height: 20px;
      
      &.is-leaf {
        border-bottom: 1px solid rgba(0, 150, 255, 0.3);
      }

      &:hover {
        background: rgba(65, 123, 214, 0.19) !important;
        color: #fff !important;
      }
    }
    
    td.el-table__cell {
      background: transparent;
      border-bottom: 1px solid rgba(0, 150, 255, 0.3);
      color: #fff;
      padding: 4px 10px;
      height: 28px;
      line-height: 20px;
      cursor: pointer;
    }

    .el-table__body tr.hover-row > td.el-table__cell {
      background: rgba(65, 123, 214, 0.19);
    }

    .el-table__body tr:hover > td.el-table__cell {
      background: rgba(65, 123, 214, 0.19);
    }

    .el-table__body-wrapper {
      overflow-x: hidden;
    }
  }
  .video-container{
    width: 100%;
    height: 200px;
  }
</style>
